<template>
  <div class="h100">
    <div>
      <img
        @click="flag = true"
        class="img"
        :src="details?.serial?.Picture"
        alt=""
      />
    </div>
    <h4>城市ID：{{ city.CityID }}</h4>
    <h4 @click="cityFlag = true">城市名：{{ city.CityName }}</h4>
    <transition name="slide">
      <CarType v-show="flag"> <p @click="flag = false">返回</p></CarType>
    </transition>
    <transition name="slide">
      <City
        :cityInfo="city"
        v-show="cityFlag"
        @sendCityName="sendCityName"
      ></City>
    </transition>
  </div>
</template>

<script>
import { getClient, getDealer } from "@/api/carList";
import CarType from "@/components/Img/CarType.vue";
import City from "@/components/Dealer/City.vue";
export default {
  data() {
    return {
      city: {},
      details: {},
      flag: false,
      cityFlag: false,
    };
  },
  components: {
    CarType,
    City,
  },
  async created() {
    let res = await getClient();
    this.city = res;
    let allList = await getDealer({
      carId: this.$route.params.id,
      cityId: this.city.CityID,
    });
    this.details = allList.details;
    console.log(this.details);
    console.log(this.city);
  },
  methods: {
    sendCityName({ cityFlag, name }) {
      this.cityFlag = cityFlag;
      this.city.CityName = name;
    },
  },
};
</script>

<style scoped lang="scss">
.img {
  width: 300px;
  height: 200px;
}
</style>
